<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
</head>
<body>
    <!--基本使用-->
    <p><i class="fa fa-camera-retro"></i> fa-camera-retro</p>
    <!--大图标-->
    <!--使用 fa-lg (33%递增)、fa-2x、 fa-3x、fa-4x，或者 fa-5x 类 来放大图标。-->
    <p>
        <i class="fa fa-camera-retro fa-lg"></i> fa-lg
        <i class="fa fa-camera-retro fa-2x"></i> fa-2x
        <i class="fa fa-camera-retro fa-3x"></i> fa-3x
        <i class="fa fa-camera-retro fa-4x"></i> fa-4x
        <i class="fa fa-camera-retro fa-5x"></i> fa-5x
    </p>
    <!--使用 fa-spin 类来使任意图标旋转，现在您还可以使用 fa-pulse 来使其进行8方位旋转。尤其适合 fa-spinner、fa-refresh 和 fa-cog 。-->
    <p>
        <i class="fa fa-spinner fa-spin"></i>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <i class="fa fa-refresh fa-spin"></i>
        <i class="fa fa-cog fa-spin"></i>
        <i class="fa fa-spinner fa-pulse"></i>
    </p>
    <!--使用 fa-rotate-* 和 fa-flip-* 类可以对图标进行任意旋转和翻转。-->
    <p>
        <i class="fa fa-shield"></i> normal
        <br>
        <i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90
        <br>
        <i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180
        <br>
        <i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270
        <br>
        <i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal
        <br>
        <i class="fa fa-shield fa-flip-vertical"></i> icon-flip-vertical
    </p>
    <!--组合图标-->
    <p>
        <span class="fa-stack fa-lg">
            <i class="fa fa-square-o fa-stack-2x"></i>
            <i class="fa fa-twitter fa-stack-1x"></i>
        </span>
        fa-twitter on fa-square-o
        <br>
        <span class="fa-stack fa-lg">
            <i class="fa fa-circle fa-stack-2x"></i>
            <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
        </span>
        fa-flag on fa-circle
        <br>
        <span class="fa-stack fa-lg">
            <i class="fa fa-square fa-stack-2x"></i>
            <i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
        </span>
        fa-terminal on fa-square
        <br>
        <span class="fa-stack fa-lg">
            <i class="fa fa-camera fa-stack-1x"></i>
            <i class="fa fa-ban fa-stack-2x text-danger"></i>
        </span>
        fa-ban on fa-camera
    </p>
</body>
</html>